---
title: React Navigation
---

import navigatorTsx from '../../../examples/files/navigation/navigator.tsx'
import navigatorJs from '../../../examples/files/navigation/navigator.js'
import screenTsx from '../../../examples/files/navigation/screen.tsx'
import screenJs from '../../../examples/files/navigation/screen.js'
import render from '../../../examples/files/navigation/render.tsx'

In this section, we'll walk through adding `react-navigation` to an app.

The [`react-navigation` documentation](https://reactnavigation.org/docs/getting-started) explains how to install the required dependencies, based on your React Native setup.

After that, we need to do 3 things:

- Set up a `<NavigationContainer>` from `@react-navigation/native`
- Create a navigator:
  - `createStackNavigator` from `@react-navigation/stack`
  - `createBottomTabNavigator` from `@react-navigation/bottom-tabs`
  - `createDrawerNavigator` from `@react-navigation/drawer`
- Define the screens in our app

> I've included JavaScript and TypeScript versions of each example below - pick whichever you prefer.

---

## 1. Create a navigator

We first choose one of the available navigators, e.g. `stack`, which will act as our root navigator. Navigators may be nested later.

> If we're using TypeScript, we need to define the types for _all screens_ in the navigator.

<Example
  height={300}
  files={{
    JavaScript: navigatorJs,
    TypeScript: navigatorTsx,
  }}
  panes={['editor']}
/>

---

## 2. Create screen components

Next, we create a component for each screen.

Screens are regular React components. They'll be passed navigation-specific props when instantiated.

<Example
  height={300}
  files={{
    JavaScript: screenJs,
    TypeScript: screenTsx,
  }}
  panes={['editor']}
/>

---

## 3. Render it

Lastly, we render a `NavigationContainer` with our navigator within it.

Each `Screen` component defines a route in our app. If we want nested navigators, e.g. a tab navigator within a stack navigator, we can use another navigator as a screen's `component`.

> We only need a single `NavigationContainer`, even if we have nested navigators.

<Example code={render} panes={['editor']} />
